<template>
    <section id="main">
        <mt-header fixed title="注册">
            <mt-button icon="login" slot="left" @click="goLogin">登录</mt-button>
        </mt-header>
        <div class="line1"></div>
        <mt-field label="用户名" placeholder="请输入用户名" v-model="user.name"></mt-field>
        <mt-field label="密码" placeholder="请输入密码" type="password" v-model="user.pwd"></mt-field>
        <mt-field label="邮箱" placeholder="请输入邮箱" type="email" v-model="user.email"></mt-field>
        <mt-field label="手机号" placeholder="请输入手机号" type="tel" v-model="user.phone"></mt-field>
        <div class="line2"></div>
        <mt-button type="primary" size="large" @click.native="userRegister">确认</mt-button>
    </section>
</template>
<script>
    import {Toast} from 'mint-ui';

    export default {
        data() {
            return {
                user: {
                    name: '',
                    email: '',
                    pwd: '',
                    phone: '',
                },
            }
        },
        mounted(){
        },
        methods: {
            goLogin() {
                this.$router.go(-1)
            },
            userRegister() {
                let user = new this.$api.SDK.User();
                user.setUsername(this.user.name);
                user.setPassword(this.user.pwd);
                user.setEmail(this.user.email);
                user.signUp().then((loginUser) => {
                    this.$store.dispatch('login', loginUser); // 保存到 Vuex 中
                    this.$router.go(-1) // 回到上一页
                    Toast({
                        message: '注册成功',
                        iconClass: 'icon icon-success'
                    })
                }).catch(error => {
                    Toast({
                        message: error.message,
                        iconClass: 'icon icon-success'
                    })
                })

            }
        }
    }
</script>
<style>
    .line1 {
        border-top: 15px white solid;
    }

    .line2 {
        border-top: 15px rgb(224, 224, 224) solid;
    }
</style>

